﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <!--[if IE 7]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome-ie7.min.css}"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace-ie.min.css}"/>
    <![endif]-->
    <script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/erp/Widget/Validform/5.3.2/Validform.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/js/jquery-ui-1.10.3.custom.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.ui.touch-punch.min.js}"></script>
    <script th:src="@{/erp/assets/js/ace-elements.min.js}"></script>
    <script th:src="@{/erp/assets/js/ace.min.js}"></script>
    <script th:src="@{/erp/js/lrtk.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
    <title>订单发货</title>

</head>

<body>

<div class="margin clearfix">
    <div class="stystems_style">
        <div class="tabbable">
            <div class="page-content clearfix">
                <div id="Member_Ratings">
                    <div class="tab-content">
                        <div id="home" class="tab-pane active">
                            <div class="border clearfix" style="margin-left:10px;">
                                <span class="l_f">
                                    <a class="btn btn-primary radius" onclick="member_dd()">&nbsp;打印订单</a>
                                    <a class="btn btn-primary radius" onclick="return member_fhd()">&nbsp;打印发货单</a>
                                </span>
                            </div>
                            <table class="table table-striped table-bordered table-hover" id="sample-table">
                                <thead>
                                <tr>
                                    <th width="25">
                                        <label>
                                            <input type="checkbox" class="ace">
                                            <span class="lbl"></span>
                                        </label>
                                    </th>
                                    <th width="70">序号</th>
                                    <th width="100">订单编号</th>
                                    <th style="display: none"></th>
                                    <th width="100">订单状态</th>
                                    <th width="90">付款情况</th>
                                    <th width="90">商品名称</th>
                                    <th width="90">商品数量</th>
                                    <th width="100">应收金额</th>
                                    <th width="100">实收金额</th>
                                    <th width="80">收货人</th>
                                    <th width="100">收货地址</th>
                                    <th width="100">下单时间</th>
                                    <th width="100">支付时间</th>
                                    <th width="100">订单备注</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div style="position: absolute;right: 85px;">
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                    <!--发货图层-->
                    <div class="add_menber" id="add_menber_style" style="display:none;height: 380px">
                        <form>
                            <ul class=" page-content">
                                <li><label class="label_name">订单编号：</label>
                                    <span class="add_name">
                                        <input id="orderNum" name="orderNum" type="text" class="text_add" readonly="readonly"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">发货单号：</label>
                                    <span class="add_name">
                                        <input id="shippingNum" name="shippingNum" type="text" class="text_add" readonly="readonly"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">配送方式：</label><span class="add_name">
                            <select name='shippingMethodId' style='width:200px' id="shippingMethodId">
                                <option value='' selected>请选择</option>
                                <!--配送物流-->
                                <option th:each="Logistics:${allLogistics}" th:text="${Logistics.get('logistics_name')}" th:value="${Logistics.get('logistics_id')}">
                            </select></span><div class="prompt r_f"></div>
                                </li><div class="prompt r_f"></div></li>
                                <li><label class="label_name">车辆选择：</label><span class="add_name">
                                    <select name='sldd' style='width:200px' id="shippingTruckId">
                                        <option value='' selected>请选择</option>
                                    </select></span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">发货时间：</label><span class="add_name">
                                    <input value="" id="shippingDate" name="shippingDate" type="text" class="text_add laydate-icon" style="width: 190px"/></span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">司机姓名：</label>
                                    <span class="add_name"><select name='司机姓名' style='width:200px' id="driverName">
                                        <option value='' selected>请选择</option>
                                    <!--司机姓名-->
                                    </select></span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <!--司机ID隐藏框-->
                                <input name="driverId" style="display: none" id="driverId"/>
                                <!--车辆ID隐藏框-->
                                <input name="shippingTruckId" style="display: none" id="vehicleId"/>
                                <li><label class="label_name">司机电话：</label>
                                    <span class="add_name">
                                        <input value="" id="driverTel" name="司机电话" type="text" class="text_add" readonly="readonly"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">车辆牌号：</label>
                                    <span class="add_name">
                                        <input value="" id="vehicleNum" name="车辆牌号" type="text" class="text_add" readonly="readonly"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">出发地：</label>
                                    <span class="add_name">
                                        <input th:value="${company.getCompanyProvince()+company.getCompanyCity()+company.getCompanyArea()+company.getCompanyAddress()}"
                                        id="startPlace" name="startPlace" type="text" class="text_add"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">目的地：</label>
                                    <span class="add_name">
                                        <input value="" id="endPlace" name="endPlace" type="text" class="text_add"/>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">距离：</label>
                                    <span class="add_name">
                                        <input value="" id="distance" onblur="testDistanceText()" name="distance" type="text" class="text_add"/>（单位：公里）

                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li><p id="distanceText" th:text="距离输入有误" style="display: none;color: red;margin-left: 10px"></p></li>

                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var reg = /^\d{1,}$/
    var pattern = new RegExp(reg);
    function testDistanceText() {
        if (!pattern.test($("#distance").val())) {
            $("#distanceText").show();
        } else {
            $("#distanceText").hide();
        }
    }

    $(function () {
        $('#example').dataTable({
            paging: false,
            searching: false
        });
        var table = $('#sample-table').DataTable({
            /*    destroy: false,*/
            searching: false,
            serverSide: true,   //开始服务器分页
            aoColumnDefs: [
                {"orderable": false, "aTargets": [0, 1, 2, 3, 4, 5]}// 制定列不参与排序
            ],
            ajax: {
                url: '/shippings/page',
                type: 'post',
            },
            columns: [
                /*选框*/
                {
                    "data": "order_id",
                    'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<label><input type="checkbox" class="ace ace_cek"><span class="lbl"></span></label>');

                    }
                },
                /*序号*/
                {
                    "data": "order_id",
                    'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).text(row + 1);
                    }
                },
                /*订单编号*/
                {"data": "order_id", 'sDefaultContent': ''},
                /*订单状态id*/
                {
                    "data": "order_status",
                    'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css("display", "none");
                    }
                },
                /*订单状态*/
                {
                    "data": "order_status", 'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == '2') {
                            $(td).text("未发货");
                            $(td).css('color', 'red')
                        }
                        if (cellData == '3') {
                            $(td).text("已发货");
                            $(td).css('color', 'red')
                        }
                    }
                },
                /*付款情况*/
                {
                    "data": "order_id",
                    'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).text("已付款");
                    }
                },
                /*商品名称*/
                {"data": "p_name", 'sDefaultContent': ''},
                /*商品数量*/
                {"data": "number", 'sDefaultContent': ''},
                /*应收金额*/
                {"data": "money", 'sDefaultContent': ''},
                /*实收金额*/
                {"data": "money", 'sDefaultContent': ''},
                /*收货人*/
                {"data": "company_name", 'sDefaultContent': ''},
                /*收货地址*/
                {
                    "data": "company_province",'sDefaultContent': '', "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).text(rowData.company_province + rowData.company_city + rowData.company_area + rowData.company_address);
                    }
                },
                /*{ "data": "company_province" },*/
                /*下单时间*/
                {"data": "deal_time", 'sDefaultContent': ''},
                /*支付时间*/
                {"data": "deal_time", 'sDefaultContent': ''},
                /*订单备注*/
                {"data": "remark", 'sDefaultContent': ''},

                /*操作*/
                {
                    "data": "company_name",
                    'sDefaultContent': '',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<a title="发货"  class="btn btn-xs btn-info shipping" id="shipping"><i class="bigger-10" style="fout-size:5">发货</i></a>')
                        /*$(td).className('td-manage');*/
                        $(td).attr("class", "td-manage")
                    }
                }
            ]
        });
    })
    jQuery(function ($) {
        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        });

        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }
    })
    /*打印订单跳转*/
    function member_dd(id) {
        var ace_che = $('.ace_cek').is(':checked');
        if (!ace_che) {
            layer.open({
                title: '提示',
                content: '请选择需要打印的订单编号！'
            })
            return;
        }
        /*选中行的订单状态*/
        var status;
        $(".table input[type='checkbox']").each(function () {
            if ($(this).prop("checked")) {
                status = $(this).closest('tr').find('td').eq(3).text();
                console.log(status);
                if (status != '2') {
                    layer.open({
                        title: '提示',
                        content: '请选择未发货订单！'
                    })
                } else {
                    /*选中行的订单编号*/
                    var orderNum;
                    $(".table input[type='checkbox']").each(function () {
                        if ($(this).prop("checked")) {
                            orderNum = $(this).closest('tr').find('td').eq(2).text();
                            console.log(orderNum);
                        }
                    });
                    window.location.href = "/shippings/dd?orderNum=" + orderNum;
                }
            }
        });
    }

    /*打印发货单跳转*/
    function member_fhd(id) {
        var ace_che = $('.ace_cek').is(':checked');
        if (!ace_che) {
            layer.open({
                title: '提示',
                content: '请选择需要打印的订单编号！'
            })
            return;

        }
        /*选中行的订单状态*/
        var status;
        $(".table input[type='checkbox']").each(function () {
            if ($(this).prop("checked")) {
                status = $(this).closest('tr').find('td').eq(3).text();
                console.log(status);
                if (status != '3') {
                    layer.open({
                        title: '提示',
                        content: '请选择已发货订单！'
                    })
                } else {
                    /*选中行的订单编号*/
                    var orderNum;
                    $(".table input[type='checkbox']").each(function () {
                        if ($(this).prop("checked")) {
                            orderNum = $(this).closest('tr').find('td').eq(2).text();
                        }
                    });
                    window.location.href = "/shippings/dy?orderNum=" + orderNum;
                }
            }
        });
    }
    /*发货*/
    $(function () {
        $("body").on("click", ".shipping", function () {

            if ($(this).closest('tr').find('td').eq(3).text() == '3') {
                layer.open({
                    title: '提示',
                    content: '该订单已发货！'
                })

            } else {
                /*获取订单编号*/
                var orderNum = $(this).parent().parent().children("td:eq(2)").text()
                $("#endPlace").val($(this).parent().parent().children("td:eq(11)").text())
                $("#orderNum").val(orderNum);/*将订单编号赋值到input框*/
                $("#shippingNum").val(new Date().getTime())/*生成随机单号*/
                layer.open({
                    type: 1,
                    title: '发货确认',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['800px', ''],
                    content: $('#add_menber_style'),
                    btn: ['确认发货', '取消'],
                    /*按钮点击成功执行的事件*/
                    yes: function (index, layero) {
                        var num = 0;
                        var str = "";
                        /*输入框不能为空*/
                        $("form input[type$='text'],form select").each(function (n) {
                            if ($(this).val() == "") {
                                layer.alert(str += "" + $(this).context.parentElement.parentElement.firstElementChild.textContent.split("：",1) + "不能为空！\r\n", {
                                    title: '提示框',
                                    icon: 0,
                                });
                                num++;
                                return false;
                            }
                        });

                        if (num > 0) {
                            return false;
                        } else {
                            if (pattern.test($("#distance").val())){
                                $.ajax({
                                    type: 'post',
                                    url: '[[@{/shippings/saveShipping}]]',
                                    data: $('form').serialize(),/*发送表单数据*/
                                    /*发货成功提示框*/
                                    success: function (d) {
                                        if(!d.rs){
                                            layer.msg("发货失败",{icon:2,time:2000});
                                            return;
                                        }
                                        layer.alert('发货成功！', {
                                            title: '提示框',
                                            icon: 1,
                                        });
                                        layer.close(index);
                                        window.parent.document.getElementById('iframe').contentWindow.location.reload(true);
                                    },
                                    /*发货失败提示框*/
                                    error: function () {
                                        layer.alert('发货失败，请检查信息！', {
                                            title: '提示框',
                                            icon: 0,
                                        });
                                    }
                                });
                            }else {
                                layer.alert('距离输入有误，请检查信息！', {
                                    title: '提示框',
                                    icon: 0,
                                });
                            }


                        }
                    }
                });
            }
        })
    })

    /*选择车辆*/
    $("#shippingMethodId").bind("change", function () {
        $('#shippingTruckId option').not(":first").remove();
        $.ajax({
            url: '[[@{/shippings/allVehicleType}]]',
            data: {
                logisticsId: $("#shippingMethodId").val()
            },
            success: function (d) {
                if(d.rs){
                    var data = d.data;
                    for (var i in data) {
                        /*循环添加option*/
                        $("#shippingTruckId:last").append("<option value=" + data[i] + ">" + data[i] + "</option>")
                    }
                }else{
                    layer.msg("车辆加载失败",{icon:2,time:2000})
                }
            }
        })
    });
    var allDrivers = [];
    /*选择司机*/
    $("#shippingTruckId").bind("change", function () {
        $("#driverName option").not(":first").remove();
        $.ajax({
            url: '[[@{/shippings/allDriverMessage}]]',
            data: {
                logisticsId: $("#shippingMethodId").val(),
                vehicle_type: $("#shippingTruckId").val()
            },
            success: function (d) {
                if(d.rs){
                    var data = d.data;
                    allDrivers = data;
                    for (var i in data) {
                        $("#driverName:last").append("<option value=" + data[i].driver_id + ">" + data[i].driver_name + "</option>")
                    }
                }else{
                    layer.msg(d.msg,{icon:2,time:2000});
                }

            }
        })
    });
    //联动司机电话等信息
    $("#driverName").bind("change", function () {
        for (var i in allDrivers) {
            if (allDrivers[i].driver_id == $("#driverName").val()) {
                $("#driverTel").val(allDrivers[i].driver_control);
                $("#vehicleNum").val(allDrivers[i].number_plate);
                $("#driverId").val(allDrivers[i].driver_id);
                $("#vehicleId").val(allDrivers[i].vehicle_id);
            }
        }
    });

    laydate.render({
        elem: '#shippingDate',
        type: 'datetime'
    });
</script>
